<template>
  <div>
    <el-card shadow="never" style="margin: 0 30px">
      <div slot="header">
        <span>添加</span>
      </div>
      <el-row :gutter="24">
        <el-col :span="6" :offset="0">
          <el-input
            v-model="seach.name"
            placeholder="姓名"
            size="normal"
            clearable
          ></el-input
        ></el-col>
        <el-col :span="6" :offset="0">
          <el-input
            v-model="seach.name"
            placeholder="姓名"
            size="normal"
            clearable
          ></el-input
        ></el-col>
        <el-col :span="6" :offset="0">
          <el-select
            v-model="seach.classId"
            style="width: 100%"
            placeholder="请选择班级"
          >
            <el-option
              v-for="item in classList"
              :key="item.id"
              :label="item.className"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6" :offset="0">
          <el-date-picker
            style="width: 100%"
            v-model="seach.startTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="6" :offset="0"> </el-col>

        <el-col :span="6" :offset="18" style="margin-top: 30px">
          <el-button size="mini">重置</el-button>
          <el-button type="primary" size="mini" @click="doSearch"
            >查询</el-button
          >
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never" style="margin: 30px 30px">
      <div slot="header">
        <span
          ><el-button type="primary" size="mini" @click="goadd">新增</el-button>
        </span>
      </div>

      <el-table
        :data="studentslist"
        border
        v-loading="loading"
        style="width: 100%"
      >
        <el-table-column
          fixed
          label="序号"
          type="index"
          width="50"
        ></el-table-column>
        <el-table-column prop="name" label="姓名" width="120" align="center">
        </el-table-column>
        <el-table-column
   
          prop="sexv"
          label="性别"
          width="100"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="cityText"
          label="地区"
          width="320"
          align="center"
        >
        </el-table-column>

        <el-table-column prop="school" label="学校" width="200" align="center">
        </el-table-column>
        <el-table-column
          prop="classname"
          label="班级"
          width="200"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="tel" label="电话" width="200" align="center">
        </el-table-column>
        <el-table-column prop="wx" label="微信" width="150" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row.id)"
              type="text"
              size="small"
              >删除</el-button
            >
            <el-button type="text" size="small" @click="edit(scope.row.id)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Page.start"
        :page-sizes="Page.sizes"
        :page-size="Page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Page.totalCount"
        style="text-align: right; margin-top: 30px"
      >
      </el-pagination>
    </el-card>
    <Detal ref="detal" :list="classList" @getstudentlist="getstudentlist"></Detal>
  </div>
</template>

<script>
import HomeApi from "@/api/table/index";
import Detal from "./detal/detal";
import _ from "lodash";
export default {
  components: { Detal },
  name: "student",
  data() {
    return {
      studentslist: [],
      classList: [],
      seach: [],
      loading: false,
      Page: {
        start: 1,
        limit: 10,
        sizes: [10, 20, 30, 40],
        totalCount: 0,
      },
    };
  },
  created() {
    this.getclazzlist();
    this.getstudentlist();
  },
  methods: {
    //删除
    handleClick(id) {
      HomeApi.studentdel({ id }).then((res) => {});
      this.getstudentlist();
    },
    //编辑
    edit(id) {
      this.$refs.detal.openedit(id);
    },
    //查询
    doSearch() {
      this.Page.start = 1;
      this.getstudentlist();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.Page.limit = val;
      this.getstudentlist();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.Page.start = val;
      this.getstudentlist();
    },
    //获取列表
    getstudentlist() {
      this.loading = true;
      var params = {
        start: this.Page.start,
        limit: this.Page.limit,
        ...this.seach,
      };
      params = _.pickBy(params, (item) => item);
      HomeApi.studentlist(params).then((res) => {
        this.studentslist = res.data.list;
        this.Page.totalCount = res.data.totalRow;
        console.log(res.data.list);
      });
      this.loading = false;
    },
    //班级列表
    getclazzlist() {
      var params = {
        start: this.Page.start,
        limit: this.Page.limit,
      };
      HomeApi.clazzlist(params).then((res) => {
        this.classList = res.data.list;
      });
    },
    //添加编辑
    goadd() {
      this.$refs.detal.opendetail();
    },
  },
};
</script>
<style scoped  lang='scss'>
</style>